<template>
  <div class="flex-center-row index-box" :style="{backgroundColor:bgColor}">
<!--    菜单栏-->
    <div class=" index-menu-box flex-center-col-left">

      <Menu></Menu>
    </div>
<!--    显示栏-->
    <div class=" index-content-box">
<!--      用户菜单栏-->
      <div class="index-content-box-head flex-center-row">
        <UserMenu></UserMenu>
      </div>

<!--      显示内容-->
      <div class="index-content-box-body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
    import Menu from "../../components/index/Menu"
    import UserMenu from "../../components/menu/UserMenu";
    export default {
      name: "index",
      components:{
        UserMenu,
        Menu
      },
      data(){

        return{
          bgColor:"#e8e6e6"
        }
      }
    }
</script>

<style scoped lang="less">
  .index-box{
      width: 100vw;

      /*min-width: 100vw;*/
      /*min-height: 100vh;*/

    .index-menu-box{

        flex: 1;
        height: 90%;

    }
    .index-content-box{
        flex: 12;
        height: 100%;
        min-height: 100vh;

        display: flex;
        flex-direction: column;
        align-items: center;
        .index-content-box-head{
          width: 90%;
          min-height: 50px;

        }
        .index-content-box-body{
          width: 90%;
          height: 90%;
          min-height: 600px;
          background-color: white;
        }
    }
  }
</style>
